import { Button, Typography } from '@mui/material'
import { styled } from '@mui/material/styles'
import Image, { ImageType } from './image'
import { TCatalogData } from '../../store/types'

export type TCardProps = TCatalogData & {
	discountPrice?: number
	type: ImageType
}

const StyledContainer = styled('div')(() => ({
	display: 'flex',
	flexDirection: 'column',
	width: '236px',
	height: '359px',
}))

const StyledDiscountPrice = styled(Typography)(() => ({
	textDecoration: 'line-through',
	fontSize: '12px',
	fontFamily: 'Nunito',
	minHeight: '30px',
}))

const StyledPrice = styled(Typography, {
	shouldForwardProp: (props) => props !== 'discount',
})<Pick<TCardProps, 'discount'>>(({ discount }) => ({
	fontSize: '20px',
	fontWeight: discount ? 'Bold' : 'Regular',
	color: discount ? 'red' : 'black',
	fontFamily: 'Nunito',
}))

const StyledQuantity = styled(Typography)(() => ({
	fontSize: '12px',
	fontWeight: 'Regular',
	color: '#7B8E98',
	fontFamily: 'Nunito',
}))

const StyledName = styled(Typography)(() => ({
	height: '44px',
	fontSize: '16px',
	fontWeight: 'Semibold',
	color: '#1A1A1A',
	fontFamily: 'Nunito',
	overflow: 'hidden',
}))

const StyledButton = styled(Button)(() => ({
	marginTop: '16px',
	width: '121px',
	height: '40px',
	borderRadius: '55px',
	background: '#FFE44D',
	border: '0px',
	'&': {
		color: '#1A1A1A',
		textTransform: 'none',
	},
}))

const Card = ({
	_id,
	pictures,
	discount,
	discountPrice,
	price,
	wight,
	name,
	type,
}: TCardProps) => (
	<StyledContainer>
		<Image _id={_id} type={type} discount={discount} pictures={pictures} />
		<StyledDiscountPrice>{discount !== 0 ? price : ''}</StyledDiscountPrice>
		<StyledPrice discount={discount}>{discountPrice}</StyledPrice>
		<StyledQuantity>{wight}</StyledQuantity>
		<StyledName>{name}</StyledName>
		<StyledButton variant='outlined'>
			<Typography>В корзину</Typography>
		</StyledButton>
	</StyledContainer>
)

export default Card
